<template>
	<view>
		<view class="formList">
			<u--form labelPosition="left" labelWidth="80px" :model="model" :rules="rules" ref="form">
				<u-form-item :label="$t('public.cutNo')+$t('public.colon')" prop="production.cutNo" borderBottom>
					<u-input v-model="model.production.cutNo" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('public.cutNo')" disabled>
						<template slot="suffix">
							<i class="iconfont icon-saoyisao" @click="scanHandle"></i>
							<!-- <u-icon name="arrow-down" @click="searchAllCutNo"></u-icon> -->
						</template>
					</u-input>
					<!-- <view slot="right">
						<i class="iconfont icon-saoyisao" @click="scanHandle" style="fontSize:50rpx"></i>
					</view> -->
				</u-form-item>
				<u-form-item :label="$t('public.productionNo')+$t('public.colon')" prop="production.no" borderBottom>
					<u-input v-model="model.production.no" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('public.productionNo')" disabled>
						<template slot="suffix">
							<u-icon name="arrow-down" @click="searchAllNo"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('public.color')+$t('public.colon')" prop="production.color" borderBottom>
					<u-input v-model="model.production.color" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('public.color')" disabled>
						<template slot="suffix">
							<u-icon name="arrow-down" @click="searchAllColor"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('public.size')+$t('public.colon')" prop="production.size" borderBottom>
					<u-input v-model="model.production.size" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('public.size')" disabled>
						<template slot="suffix">
							<u-icon name="arrow-down" @click="searchAllSize"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('public.part')+$t('public.colon')" prop="production.part" borderBottom>
					<u-input v-model="model.production.part" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('public.part')" disabled>
						<template slot="suffix">
							<u-icon name="arrow-down" @click="searchAllPart"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('homepage.WorkReport.reporter')+$t('public.colon')" prop="production.name"
					borderBottom>
					<u-input v-model="model.production.name" type="input"
						:placeholder="$t('public.pleaseSelect')+$t('homepage.WorkReport.reporter')" disabled>
						<template slot="suffix">
							<u-icon name="arrow-down" @click="searchAllName"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('page.Procedure')+$t('public.colon')" prop="production.procedure">
					<u-textarea v-model="model.production.procedure" :placeholder="$t('page.Procedure')" disabled></u-textarea>
				</u-form-item>
			</u--form>
			<u-picker :show="noSelect" :columns="noList" @cancel="noCancel" @confirm="noConfirm">
			</u-picker>
			<!-- <u-picker :show="cutNoSelect" :columns="cutNoList" @cancel="cutNoCancel" @confirm="cutNoConfirm">
			</u-picker> -->
			<u-picker :show="colorSelect" :columns="colorList" @cancel="colorCancel" @confirm="colorConfirm">
			</u-picker>
			<u-picker :show="sizeSelect" :columns="sizeList" @cancel="sizeCancel" @confirm="sizeConfirm">
			</u-picker>
			<u-picker :show="partSelect" :columns="partList" @cancel="partCancel" @confirm="partConfirm">
			</u-picker>
			<u-picker :show="nameSelect" :columns="nameList" @cancel="nameCancel" @confirm="nameConfirm">
			</u-picker>
		</view>
		<!-- 底部按钮 -->
		<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submitBtn"
			@leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>

<script>
	import {
		getProductionCode,
		getProductionNos,
		getProductionTaskByNo,
		colorSizeQueryListByField,
		procedureQueryListByField,
		getUsersByCurrent,
		queryUncompletedReport,
		queryUncompletedReportNew
	} from "@/api/homepage.js"
	export default {
		data() {
			var checkProce = (rule,value,callback) => {
			  if (value == "暂无数据") {
				callback(this.$t('homepage.WorkReport.procNull'))
			  } else {
				callback()
			  }
			}
						
			return {
				model: {
					production: {
						cutNo: '',
						no: '',
						color: '',
						size: '',
						part: '',
						name: this.$store.state.loginData.realname,
						procedure: "",
					},
				},
				rules: {
					'production.no': [{
						required: true,
						message: this.$t('homepage.WorkReport.noUnNull'),
						trigger: ['change', 'blur'],
					}],
					'production.cutNo': [{
						required: true,
						message: this.$t('homepage.WorkReport.cutNoUnNull'),
						trigger: ['change', 'blur'],
					}],
					'production.name': [{
						required: true,
						message: "汇报人不能为空",
						trigger: ['change', 'blur'],
					}],
					'production.procedure': [{
						required: true,
						validator: checkProce,
						trigger: ['change', 'blur'],
					}],
				},
				noList: [],
				noSelect: false,
				productionTaskId: '',
				cutNoList: [],
				cutNoSelect: false,
				cutList: [],
				cutNoId: '',
				colorList: [],
				colorSelect: false,
				sizeList: [],
				sizeSelect: false,
				partList: [],
				partSelect: false,
				nameList: [],
				nameSelect: false,
				tableList: [],
				nameLists: [],
				procedureId: "", //工序id
				reportUserId: this.$store.state.loginData.id,
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/WorkReport/index"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			procedure() {
				let data = {
					id: "",
					name: "暂无数据"
				}
				let arr = uni.getStorageSync("procedureData")
				if (arr !== "") {
					arr.forEach((item, index) => {
						if (item.switch) {
							data = {
								id: item.procedureId,
								name: item.procedureName
							}
						}
					})
				}
				return data
			}
		},
		watch: {
			procedure: {
				handler(n, o) {
					this.model.production.procedure = n.name
					this.procedureId = n.id
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {
			var _this = this
			uni.$on('scancodedate', function(data) {
				_this.searchList(data.code)
			})
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedate')
		},
		methods: {
			// 左侧扫一扫图标事件
			scanHandle() {
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_result) {
							let obj = ret.resp_result.replace(/\s/g, "")
							this.searchList(obj);
						} else {
							uni.showToast({
								title: this.$t('topSearch.scanTip'),
								icon: "none",
								duration: 3000
							})
						}
					})
			},
			// 裁剪单号查询
			searchList(e) {
				this.model.production.cutNo = e
				getProductionCode({
					cuttingSheetNo: e,
				}).then((res) => {
					if (res.code == 0) {
						this.model.production.part = res.data.partName
						this.model.production.no = res.data.productionNo
						this.productionTaskId = res.data.productionTaskId //单号id
						this.cutNoId = res.data.cuttingSheetId //裁剪单号id
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			// 生产单号
			noCancel() {
				this.noSelect = false
			},
			noConfirm(e) {
				this.noSelect = false
				var no = e.value
				this.model.production.no = no.toString()
				this.productionTaskId = no.toString()
			},
			searchAllNo() {
				this.noSelect = true
				getProductionNos({}).then((res) => {
					var noLists = []
					noLists.push(res.data)
					this.noList = noLists
				})
			},
			// // 裁剪单号
			// cutNoCancel() {
			// 	this.cutNoSelect = false
			// },
			// cutNoConfirm(e) {
			// 	this.cutNoSelect = false
			// 	var cutNo = e.value
			// 	this.model.production.cutNo = cutNo.toString()
			// 	this.cutNoId = this.cutList[e.indexs].cutId
			// 	this.productionTaskId = this.cutList[e.indexs].productionTaskId
			// },
			// searchAllCutNo() {
			// 	this.cutNoList = []
			// 	this.cutNoSelect = true
			// 	getProductionTaskByNo({
			// 		productionNo: this.model.production.no
			// 	}).then((res) => {
			// 		var str = [];
			// 		this.cutList = []
			// 		for (var i = 0; i < res.data.cuttingSheetList.length; i++) {
			// 			str.push(res.data.cuttingSheetList[i].cuttingSheetNo)
			// 			let obj = {}
			// 			obj.cutNo = res.data.cuttingSheetList[i].cuttingSheetNo
			// 			obj.cutId = res.data.cuttingSheetList[i].id
			// 			obj.productionTaskId = res.data.id
			// 			this.cutList.push(obj)
			// 		}
			// 		let obj = []
			// 		obj = str
			// 		this.cutNoList.push(obj)
			// 	})
			// },
			// 颜色
			colorCancel() {
				this.colorSelect = false
			},
			colorConfirm(e) {
				this.colorSelect = false
				var color = e.value
				this.model.production.color = color.toString()
			},
			searchAllColor() {
				this.$refs.form.validate().then(res => {
					this.colorList = []
					this.colorSelect = true
					colorSizeQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.cutNoId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].color) == -1) {
								str.push(res.data[i].color)
							}
						}
						let obj = []
						obj = str
						this.colorList.push(obj)
					})
				})
			},
			// 尺码
			sizeCancel() {
				this.sizeSelect = false
			},
			sizeConfirm(e) {
				this.sizeSelect = false
				var size = e.value
				this.model.production.size = size.toString()
			},
			searchAllSize() {
				this.$refs.form.validate().then(res => {
					this.sizeList = []
					this.sizeSelect = true
					colorSizeQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.cutNoId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].size) == -1) {
								str.push(res.data[i].size)
							}
						}
						let obj = []
						obj = str
						this.sizeList.push(obj)
					})
				})
			},
			// 部件
			partCancel() {
				this.partSelect = false
			},
			partConfirm(e) {
				this.partSelect = false
				var part = e.value
				this.model.production.part = part.toString()
			},
			searchAllPart() {
				this.$refs.form.validate().then(res => {
					this.partList = []
					this.partSelect = true
					procedureQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.cutNoId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].partName) == -1) {
								str.push(res.data[i].partName)
							}
						}
						let obj = []
						obj = str
						this.partList.push(obj)
					})
				})
			},
			// 汇报人
			nameCancel() {
				this.nameSelect = false
			},
			nameConfirm(e) {
				this.nameSelect = false
				var name = e.value
				this.nameLists.forEach((item) => {
					if (item.realname == name) {
						this.reportUserId = item.id
					}
				})
				this.model.production.name = name.toString()
			},
			searchAllName() {
				// this.$refs.form.validate().then(res => {
				this.nameList = []
				this.nameLists = []
				this.nameSelect = true
				getUsersByCurrent().then((res) => {
					this.nameLists = res.data
					var str = [];
					for (var i = 0; i < res.data.length; i++) {
						str.push(res.data[i].realname)
					}
					let obj = []
					obj = str
					this.nameList.push(obj)
				})
				// })
			},
			submitBtn() {
				uni.removeStorage({
					key: 'workReportList',
				})
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					uni.redirectTo({
						url: './tableList.vue'
					})
					queryUncompletedReportNew({
						cuttingSheetNo: this.cutNoId, //裁剪单号
						productionTaskId: this.productionTaskId, //生产单号id
						color: this.model.production.color, //颜色
						sizeName: this.model.production.size, //尺码
						partName: this.model.production.part, //部件名称
						produceList: this.procedureId, //工序
					}).then((res) => {
						if (res.code == 0) {
							// 工序
							// const procedureName = this.procedure.name.split(',')
							// const procedureId = this.procedure.id.split(',')
							// const procedure = procedureName.map((item, index) => {
							// 	return {
							// 		procedureName: item,
							// 		procedureId: procedureId[index]
							// 	};
							// });
							res.data.forEach((item, index) => {
								this.$set(item, 'id', index + 1)
								// procedure.forEach((m,n)=>{
								// this.$set(item, 'procedureName', m.procedureName)
								// this.$set(item, 'procedureId', m.procedureId)
								// })
							})
							console.log(res.data)
							// res.data = res.data.map((obj, index) => ({ ...obj, ...procedure[index] }));
							// console.log(res.data)
							let data = JSON.stringify(res.data)
							const url =
								`/pages/HomePage/WorkReport/tableList?data=${data}&productionTaskId=${this.productionTaskId}&cuttingSheetId=${this.cutNoId}&id=${this.reportUserId}&name=${this.model.production.name}`;
							uni.navigateTo({
								url: url
							})
						} else {
							uni.$u.toast(res.message)
						}
					})
				}).catch(errors => {
					// uni.$u.toast(errors.message)
				})
			},
			resetBtn() {
				const validateList = ['production.no', 'production.cutNo', 'production.color', 'production.size',
					'production.part', 'production.name'
				]
				this.$refs.form.resetFields()
				this.$refs.form.clearValidate()
				setTimeout(() => {
					this.$refs.form.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.formList {
		background-color: #fff;
		margin: 10px;
		padding: 10px 10px 20px 10px;
		width: calc(100%-40px);
		height: 100%;
		border-radius: 4px;
	}
</style>